<template>
  <view class="mask flex-center">
    <view class="content button-radius">
      <view class="content-top">
        <image class="uno-w-full uno-h-full" src="@/static/images/sjtc_icon_tb.png" />
      </view>
      <view class="content-body">
        <view class="uno-w-full uno-c-#FFFFFF uno-text-10rpx uno-text-center uno-font-700">发现新版本</view>
        <view class="uno-my-7rpx">
          <scroll-view class="box-des-scroll" scroll-y="true"><rich-text :nodes="data.describe" /></scroll-view>
        </view>
        <view class="footer flex-center">
          <view v-if="!updateBtn" class="progress-box flex-column">
            <progress class="progress" :borderRadius="35" :percent="percent" activeColor="#3DA7FF" show-info stroke-width="10" :fontSize="13"></progress>
            <view>
              <text class="uno-text-6rpx uno-c-#fff">正在下载,请稍后 ({{ downloadedSize }}/{{ packageFileSize }}M)</text>
            </view>
          </view>
          <view v-if="updateBtn" class="content-button" @click="confirm">立即更新</view>
        </view>
      </view>

      <image v-if="cancleBtn" class="close-img" src="@/static/images/app_update_close.png" @click.stop="cancel" />
    </view>
  </view>
</template>

<script>
  import { clearAppUserData } from '@/utils/index';
  export default {
    data() {
      return {
        percent: 0, //进度条百分比
        updateBtn: true, //是否显示立即更新
        cancleBtn: false,
        downloadedSize: 0, //当前已下载大小
        packageFileSize: 0, //安装包大小
        data: {
          describe: '1. 修复已知问题<br>2. 优化用户体验',
          edition_url: 'https://mp-281e3ee8-3380-4740-9b6e-11eac5254879.cdn.bspapp.com/cloudstorage/cd703d88-ece5-4823-b922-dfe8b6c7b48c.apk',
          edition_force: 1, //是否强制更新 0代表否 1代表是
          package_type: 0, //0是整包升级 1是wgt升级
        },
      };
    },
    onHide() {
      //解决应用切换到后台再次打开更新弹窗叠加多个的问题
      // this.data.edition_force = 0;
      // uni.navigateBack({
      //   delta: 1,
      // });
    },
    onLoad({ obj }) {
      if (!obj) return;
      this.data = JSON.parse(obj);
      if (this.data.edition_force == 0) {
        this.cancleBtn = true;
      }
    },

    onBackPress() {
      // 强制更新不允许返回
      if (this.data.edition_force == 1) {
        return true;
      }
    },

    methods: {
      cancel() {
        //取消升级 返回上一页
        uni.navigateBack({
          delta: 1,
        });
      },
      confirm() {
        if (this.data.package_type == 0) {
          //apk整包升级 下载地址必须以.apk结尾
          if (this.data.edition_url.includes('.apk')) {
            this.updateBtn = false;
            this.cancleBtn = false;
            this.download();
          } else {
            //外部下载 一般是手机应用市场或者其他h5页面
            this.data.edition_force = 0; // 解决跳转外部链接后，更新提示还在的问题
            // eslint-disable-next-line no-undef
            plus.runtime.openURL(this.data.edition_url);
            uni.navigateBack({
              delta: 1,
            });
          }
        } else {
          this.updateBtn = false;
          this.cancleBtn = false;
          //wgt资源包升级 下载地址必须以.wgt结尾
          this.download();
        }
      },
      download() {
        let package_type = this.data.package_type;
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        let that = this;
        const downloadTask = uni.downloadFile({
          url: this.data.edition_url,
          success: (res) => {
            if (res.statusCode === 200) {
              // eslint-disable-next-line no-undef
              plus.runtime.install(
                res.tempFilePath,
                {
                  force: true, //true表示强制安装，不进行版本号的校验；false则需要版本号校验，
                },
                function () {
                  try {
                    uni.clearStorageSync();
                    clearAppUserData();
                    // eslint-disable-next-line no-undef
                    plus.cache.clear(() => {
                      clearAppUserData();
                      uni.clearStorageSync();
                    });
                    // eslint-disable-next-line no-undef
                    plus.runtime.restart();
                    // eslint-disable-next-line no-undef
                    plus.runtime.restart();
                  } catch (error) {
                    console.log(error);
                  }
                },
                function (e) {
                  //提示部分wgt包无法安装的问题
                  that.data.edition_force = 0;
                  uni.showToast({
                    title: e.message,
                    icon: 'none',
                    duration: 2500,
                  });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 2000);
                },
              );
              if (package_type == 0) {
                // 解决安装app点击取消，更新还在的问题
                this.data.edition_force = 0;
                uni.navigateBack();
              }
            }
          },
        });
        // 进度条
        downloadTask.onProgressUpdate((res) => {
          this.percent = res.progress;
          this.downloadedSize = (res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2);
          this.packageFileSize = (res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2);
        });
      },
    },
  };
</script>

<style>
  page {
    background: transparent;
  }

  .flex-center {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
  }

  .mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.55);
  }

  .button-radius {
    border-radius: 2rpx;
  }

  .content {
    position: relative;
    width: 175rpx;
    box-sizing: border-box;
    padding: 0 3rpx;
    min-height: 196rpx;
    font-family: Source Han Sans CN;
    background: url(@/static/images/sjtc_icon_bjk.png) no-repeat;
    background-size: 100% 100%;
  }

  .text {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    text-align: center;
    color: #ffffff;
  }

  .content-top {
    width: 109rpx;
    height: 67rpx;
    margin: 18rpx auto 10rpx;
  }

  .footer {
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10rpx;
  }

  .box-des-scroll {
    box-sizing: border-box;
    padding: 0 18rpx;
    text-align: left;
    color: #fff;
    font-size: 6rpx;
  }

  .box-des {
    font-size: 6rpx;
    color: #ffffff;
    line-height: 7rpx;
  }

  .progress-box {
    width: 100%;
  }

  .progress {
    width: 100%;
    color: #fff;
  }

  .content-button {
    text-align: center;
    width: 78rpx;
    font-size: 7rpx;
    font-weight: 400;
    color: #ffffff;
    border-radius: 12rpx;
    height: 23rpx;
    line-height: 23rpx;
    background: #318bfa;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
